<template>
  <Condition :conditionList="conditionList" v-model:modelValue="condition"></Condition>
  <TaskContainer>
    <el-table :data="list" style="width: 100%" border ref="tb" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <!-- <el-table-column prop="id" label="序号" width="60"/> -->
      <el-table-column prop="leave" label="难易程度" width="100"/>
      <!-- <el-table-column prop="langName" label="语言" width="120"/>
      <el-table-column prop="module" label="模块名" width="160"/> -->
      <el-table-column prop="title" label="任务名" class-name="hidden-column"/>
    </el-table>

    <!-- 添加分页插件 -->
    <div style="margin: 20px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        hide-on-single-page
        :page-size="pagination.rows"
        :pager-count="11"
        v-model:current-page="pagination.page"
        :total="pagination.total"
        @current-change="handlePageChange"
      />
    </div>
  </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
import API from "@/api/index.js"

export default {
  name: 'GroupTaskListView',
  props: {
    groupId: Number,
    modelValue: Array,
  },
  emits: ['update:modelValue'],

  components: {
    HeaderNav,
    TaskContainer,
    Condition,
  },
  data() {
    return {
      pagination: {
        page: 1,
        rows: 10,
        total: 0
      },
      list: [],
      condition: {}, // 查询条件
      conditionList: [],
      // selectedTasks: [], // 添加选中的任务数组,重复定义
    }
  },
  created() {
    this.fetchTaskList();
  },
  methods: {
    fetchTaskList() {
      const params = {
        ...this.condition,
        page: this.pagination.page,
        rows: this.pagination.rows,
      }

      API.stucent_tasklist(params).then(res => {
        this.list = res.results || []; // 任务列表
        this.pagination.total = res.count || 0; // 设置分页总数

        // 只有在第一页（初始化）时才设置conditionList
        if (res.conditionList && this.pagination.page === 1) {
          this.conditionList = res.conditionList;
        }
      }).catch(err => {
        console.error("获取任务列表失败:", err);
      })
    },
    handlePageChange(page) {
      this.pagination.page = page;
      this.fetchTaskList();
    },
    handleSelectionChange(selection) {
      // this.selectedTasks = selection.map(item => item.id);
      // this.$emit('update:selectedTasks', this.selectedTasks); // 向父组件同步
      this.$emit('update:modelValue', selection.map(item => item.id));
    },
    getSelectedTasks() {
      return this.selectedTasks;
    }
  },
  watch: {
    condition: {
      handler(val) {
        // 当条件变更时，重置到第一页
        this.pagination.page = 1;
        this.fetchTaskList();
      },
      deep: true // 深度监听很重要，因为condition是一个对象
    }
  }
}
</script>

<style scoped>

:deep(.nav-condition-ul a) {
  color: #333;
}

.table-modules {
  padding: 10px 20px;
}

.table-modules span {
  padding: 2px 10px;
  margin: 0 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.toolbar {
  position: relative;
  right: 10px;
  z-index: 200;
  text-align: right;
  margin: 20px;
  flex: 1 1 auto;
}

:deep(.hidden-column .cell) {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

</style>